<template>
    <div class="NavBar">
       <div class="w1224" style="position: relative;">

					<div class="categorys home_categorys index-categorys">
						<div class="dt" @click="showList">
							<a class="border-box" href="javascript:;">

								全部商品分类
								<i class="categorys-square fr"></i>
							</a>
						</div>
						<!-- 全部商品分类-s -->
						<div class="dd" v-if="ishow">
							<div class="cata-nav" id="cata-nav">
								

								<div class="item">
									<div class="item-left" @mouseover="mouseenter()" @mouseleave="mouseLeave()">
										<h3 class="cata-nav-name border-box ellipsis-1">
											<div class="cata-nav-wrap">

												<a href="/Goods/Category/id/922.html" title="电器/家具">文具</a>

											</div>
										</h3>
										<ul class="cata-nav-item clearfix">
											
										<li class="border-box">
											<a href="/Goods/Category/id/923.html" target="_blank">学生文具</a>
                                        </li>
                                               								
										</ul>
									</div>
									<div class="cata-nav-layer" v-if="show">
										<div class="cata-nav-left">


											<div class="subitems">
												
												<dl class="clearfix">
													<dt><a href="/Goods/Category/id/923.html" target="_blank">学生文具&gt;</a></dt>
													<dd class="clearfix">
														<a style="" href="/Goods/Category/id/926.html" target="_blank">橡皮擦</a>
                                                        <a style="" href="/Goods/Category/id/927.html" target="_blank">修正带</a>
                                                        <a style="" href="/Goods/Category/id/928.html" target="_blank">记号笔</a>													
                                                        </dd>
												</dl>
											</div>
										</div>


									</div>
								</div>

                                
		
							</div>

						
						</div>
						<!-- 全部商品分类-e -->
					</div>
					
					<ul class="navitems clearfix border-box" id="navitems">
					

                    <li class="selected"><a class="border-box" href="/">首页</a></li>
                    
                    <li><a class="border-box" href="javascript:;" target="_blank">文具</a></li>
                    <li><a class="border-box" href="javascript:;" target="_blank">家用电器</a></li>

                    </ul>
				</div>
    </div>
</template>

<script>
export default {
    name:'NavBar',
    data(){
        return{
            //列表是否显示
            ishow:false,
            show:false
        }
    },
    methods:{
        mouseenter(){
            // console.log('我移入了')
            this.show = true
        },
        mouseLeave(){
            // console.log('我移出了')
            this.show = false
        },
        showList(){
            this.ishow = !this.ishow
        }
    }
}
</script>

<style lang="scss" scoped>
.NavBar{
    width: 100%;
    background-color: #4352bf;
    z-index: 7;
}
.w1224{
    width: 1200px;
    margin: 0 auto;
}
.categorys {
    position: relative;
    float: left;
    z-index: 8;
    height: 40px;
}
.categorys .dt>a {
    display: inline-block;
    width: 210px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    background: #5565da;
    color: #fff;
    position: relative;
    padding-left: 10px;
}
.categorys .dd {
    height: 504px;
    width: 210px;
    position: relative;
    border: 1px solid #4352bf;
}
.index-categorys .categorys-square {
    margin: 17px 15px 0 0;
    float: right;
}
.cart-square, .categorys-square {
    width: 0;
    height: 0;
    border: 6px solid rgba(0,0,0,0);
    border-top-color: #fff;
    display: inline-block;
    vertical-align: top;
    margin: 22px 1;
}
.navitems{
    margin-left: 216px;
    height: 40px;
    overflow: hidden;
}
.navitems .selected, .navitems>li:hover {
    background: #5565da;
}
.navitems .home_page, .navitems>li {
    float: left;
    height: 100%;
    cursor: pointer;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.navitems .home_page a, .navitems>li a {
    display: block;
    padding: 0 25px;
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    -webkit-transition: all .3s ease-out;
    -o-transition: all ease-out .3s;
    -moz-transition: all ease-out .3s;
    transition: all .3s ease-out;
    background-color: rgba(0,0,0,0);
}
.categorys .cata-nav-layer {
    position: absolute;
    top: -1px;
    left: 209px;
    width: 1014px;
    min-height: 504px;
    border: 1px solid #4352bf;
    background: #fff;
    // display: none;
    z-index: 12;
}
.categorys .cata-nav-layer .cata-nav-left {
    float: left;
    width: 820px;
    padding-left: 23px;
    padding-bottom: 97px;
}
.categorys .cata-nav-layer .cata-nav-left dl {
    font-size: 14px;
    border-bottom: 1px dashed #ddd;
}
.categorys .cata-nav-layer .cata-nav-left dl dt {
    position: relative;
    float: left;
    width: 100px;
    line-height: 24px;
    padding: 10px 10px 10px 0;
    color: #333;
    font-weight: 700;
    -moz-text-align-last: justify;
    text-align-last: justify;
    text-align: justify;
    text-justify: distribute-all-lines;
    word-break: break-all;
}

.categorys .cata-nav-layer .cata-nav-left dl dd {
    float: left;
    width: 621px;
    padding: 10px 0;
}
.clearfix:after {
    content: "200B";
    height: 0;
    font-size: 0;
    display: block;
    clear: both;
}
.categorys .cata-nav-layer .cata-nav-left dl dd>a {
    float: left;
    padding: 0 10px;
    margin-top: 2px;
    color: #999;
}
// 左
.categorys .item:first-child .item-left {
    border-top: none;
}
.categorys .item-left {
    overflow: hidden;
    position: relative;
    height: 100px;
    background-color: #fff;
    border-top: 1px solid #eee;
}
.categorys .item-left .cata-nav-name {
    padding: 0 12px;
}
.categorys .item-left .cata-nav-name .cata-nav-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 0;
}
.categorys .item-left .cata-nav-name .cata-nav-wrap a {
    display: inline-block;
    vertical-align: top;
    line-height: 44px;
    font-size: 16px;
    color: #222;
    font-weight: 400;
}
.categorys .item-left .cata-nav-item {
    max-height: 40px;
    font-size: 12px;
    color: #666;
    overflow: hidden;
    padding: 0 12px;
    margin-bottom: 20px;
}
.categorys .item-left .cata-nav-item li {
    float: left;
    line-height: 20px;
    padding-right: 10px;
    position: relative;
    height: 20px;
}
.categorys .item-left .cata-nav-item li:before {
    content: "";
    position: absolute;
    right: 6px;
    top: 2px;
    width: 1px;
    height: 14px;
    background-color: #666;
}
</style>